<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/common/meta.jsp"%>
<title>VTC - Holistic category - HPP</title>
<%@ include file="/common/css_js.jsp"%>
<script type="text/javascript">
	function saveOwner() {
		$("#categoryOwnerForm").attr('action', 'categoryOwner!save.action?no-decorate=0')
		$("#categoryOwnerForm").submit();
	}

	function selectCard(card){
		var nodeId = document.getElementById("categoryNodeId").value;
		var type = document.getElementById("categoryNodeType").value;
		var categoryId = document.getElementById("categoryId").value;
		var treeType = document.getElementById("treeType").value;
		if(nodeId==null || nodeId==""){
			document.getElementById("errorMessage").innerHTML="Please fill in Category Node Info first!";
			return;
		}
		if(card=='node_card'){
			if(type=="Root")
				window.top.catForm.location="categoryNode!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
			else if(type=="Branch")
				window.top.catForm.location="categoryBranch!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
			else
				window.top.catForm.location="categoryLeaf!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		}else if(card=='att_card'){
			window.top.catForm.location="categoryProgrammeAttribute!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		}else if(card=='owner_card'){
			window.top.catForm.location="categoryOwner!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		}else if(card=='planner_card'){
			window.top.catForm.location="categoryPlanner!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		}
	}

	function selectAllAttributes() {
		var cb = document.getElementById("selectAll").checked;
		if (cb == true) {
			var cbRoleCodes = document.getElementsByName("roleCodes");
			for (i = 0; i < cbRoleCodes.length; i++) {
				cbRoleCodes[i].checked = true;
			}
		} else {
			var cbRoleCodes = document.getElementsByName("roleCodes");
			for (i = 0; i < cbRoleCodes.length; i++) {
				cbRoleCodes[i].checked = false;
			}
		}
	}
	
	function viewUser(e,roleCode){
		alert(roleCode);
		//window.top.popup(e, "categoryOwner!turnToViewUserPage.action?no-decorate=0&roleCode="+roleCode, "width:800;height:600;left:100;top:100");
	}
</script>
<body>
	<div class="bodyBlank">
		<div class="wTab">
			<table id="wMu" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td class="item1" id="itemA"><a
						href="javascript:selectCard('node_card');">Category Info.</a></td>
					<s:if test="%{categoryNodeType=='Leaf'}">
						<td class="item1" id="itemB"><a
							href="javascript:selectCard('att_card');">Programme Groups</a></td>
					</s:if>
					<s:if test="%{treeType=='Root'}">
						<td class="item1" id="itemC"><a
							href="javascript:selectCard('owner_card');">Owner</a>
						</td>
					</s:if>
					<s:if test="%{treeType!='Root'}">
						<td class="item1" id="itemD"><a
							href="javascript:selectCard('planner_card');">Planner</a></td>
					</s:if>
				</tr>
			</table>
		</div>
		<script>
			selectTab("wMu", "itemC");
		</script>
		<div class="sListBorder">
			<s:actionerror/>
			  <s:fielderror/>
			  <s:actionmessage/> 
			<div class="sList">
				<s:form name="categoryOwnerForm" id="categoryOwnerForm"
					method="post">
					<s:hidden name="categoryNodeId" id="categoryNodeId"
						value="%{categoryNodeId}"></s:hidden>
					<s:hidden name="categoryNodeType" id="categoryNodeType"
						value="%{categoryNodeType}"></s:hidden>
					<s:hidden name="treeType" id="treeType" value="%{treeType}" />
					<s:hidden id="categoryId" name="categoryId"
					value="%{categoryId}"></s:hidden>
					<table width="100%" class="sTable" cellpadding="0" cellspacing="0"
						border="0">
						<tr>
							<td class="sTh checkbox">
									<input class="inputCheckbox" type="checkbox" id="selectAll" name=""
										onclick="selectAllAttributes()" />
								
							</td>
							<td class="sTh">Role</td>
						</tr>
						<s:iterator value="roleList" var="roleVar">
							<tr class="sRow2">
								<td class="sTh checkbox"><s:checkbox name="roleCodes"
										value="ownerMap[#roleVar.id.roleCode]!=null?1:0"
										fieldValue="%{#roleVar.id.roleCode}" disabled="disabled"/>
								</td>
								<td class="sCell"><a href="#" onclick="window.top.popup(event, 'categoryOwner!turnToViewUserPage.action?no-decorate=0&roleCode=<s:property value="#roleVar.id.roleCode"/>', 'width:400;height:500');">
										<s:property value="#roleVar.id.roleCode" />
								</a>
								</td>
							</tr>
						</s:iterator>
					</table>
				</s:form>
			</div>
			
			<div class="btnSet btnSetTypeA">
				<div class="left">
					<div class="button">
						<div class="left">
							<div class="right">
							<security:authorize  access="hasAnyRole('PLANNING_EXERCISE_INSERT','PLANNING_EXERCISE_UPDATE')">
								<input class="inputButton" type="button" id="saveOwner" name=""
									value="Save" onclick="saveOwner()"/>
									</security:authorize>
							</div>
						</div>
					</div>
				</div>
			</div>
			<script type="text/javascript">
				function disabledCheckbox(){
					var isEndNode = "<s:property value='endNode'/>";
					var rootNode = "<s:property value='categoryNodeType'/>";
					if(isEndNode=="true" || rootNode=="Root"){
						document.getElementById("saveOwner").disabled="";
						document.getElementById("selectAll").disabled="";
						var list = document.getElementsByName("roleCodes");
						if(list==null)
							return;
						for(var i=0; i<list.length; i++){
							list[i].disabled="";
						}
					}else{
						document.getElementById("saveOwner").disabled="disabled";
						document.getElementById("selectAll").disabled="disabled";
						var list = document.getElementsByName("roleCodes");
						if(list==null)
							return;
						for(var i=0; i<list.length; i++){
							list[i].disabled="disabled";
						}
					}
				}
				disabledCheckbox();
				
				function checkLevel1Endorsed(){
					var type = document.getElementById("categoryNodeType").value;
					var categoryId = document.getElementById("categoryId").value;
					$.ajax({
						url : "category!checkLevel1Endorsed.action?no-decorate=0&categoryId="+categoryId,
						cache : true,
						dataType : "text",
						async : false,
						success : function(data) {
							if(data=="true"){
								if(type="Root"){
									$("input[type='button']").attr("disabled", "true");
								}
							}
						},
						error : function(data) {
						}
					});
				}
				checkLevel1Endorsed();
			</script>
		</div>
	</div>
</body>